<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="../assets/images/logo.png">
  <title>归档</title>

  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/archives.css">

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script src="../node_modules/element-ui/lib/index.js"></script>
  <script src="../node_modules/jQuery/tmp/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script>
</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 70px">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="timebox card mt-3 bg-light">
              <div class="timeline mt-3">
                <ul v-for="(article, i) in viewArchiveList">
                  <h3>
                    {{article.year}}
                  </h3>
                  <li v-for="(articleObj, i) in article.articleList">
                    <h4>
                      {{articleObj.day}}<span>{{articleObj.month}}</span>
                    </h4>
                    <a :href="'blog-detail.html?' + articleObj.id" target="_blank">
                      {{articleObj.articleName}}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 侧边栏
              sidebar：用于使用jQuery引入侧边栏组件
              col-md-4：此侧边栏站整个网格的4份
              mb-5：侧边栏距离下面5rem
              d-none d-sm-block：在xs尺寸下隐藏，适用于手机
          -->
          <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
            <my-sidebar></my-sidebar>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          date : 'all',
          //相关数据
          viewArchiveList: {},
        }
      },
      methods: {
        getTableData() {
          let url = location.href;
          if (url.indexOf("?") != -1) {
            //如果有问题，说明是从右侧归档栏位点击某个时间点进入本页面的
            //浏览器地址栏上的中文会进行编码 - 所以获取出来的时候要解码
            let param = url.substr(url.indexOf("?") + 1);
            //对中文进行编码,否则会出现乱码问题
            param = decodeURIComponent(param);
            //获取到日期字符串，如：2021年12月
            this.date = param;
          }
          this.$http.get('/articleType/viewArchive/' + this.date).then((res) => {
            this.viewArchiveList = res.data.data;
          }).catch((res) => {
            this.$message("服务器繁忙");
          });
        },
      },
      components: {
        // 将组建加入组建库
        'my-header': httpVueLoader('./common/header.vue'),
        'my-sidebar': httpVueLoader('./common/sidebar.vue')
      },
      mounted() {
        this.getTableData();

      },
    })
  </script>

</body>

</html>